<template>
  <div class="nav_box">
    <div class="nav_left">
      <router-link active-class="active" to="/">主页</router-link> <br />
      <h4>第6章：外部Gltf建模文件</h4>
      <router-link active-class="active" to="/sixAddgltf"
        >6.3 加载外部gltf文件</router-link
      ><br />
      <router-link active-class="active" to="/sixOrbitC"
        >6.4 OrbitControls辅助设置相机参数</router-link
      ><br />
      <h4>第5章：几何顶点UV坐标、纹理贴图</h4>
      <router-link active-class="active" to="/fiveTextureLoader"
        >5.1 创建纹理贴图</router-link
      ><br />
      <router-link active-class="active" to="/fiveUV">
        5.3 圆形平面纹理正方形图片贴图 </router-link
      ><br />
      <router-link active-class="active" to="/fiveTex"
        >5.4 纹理对象Texture阵列(瓷砖地面案例)</router-link
      ><br />
      <router-link active-class="active" to="/fivePng"
        >5.5 透明贴图+网格辅助</router-link
      ><br />
      <router-link active-class="active" to="/fiveMove">5.6 UV动画</router-link
      ><br />
      <h4>第4章：层级模型</h4>
      <router-link active-class="active" to="/fourGroup"
        >4.1 组对象Group、层级模型</router-link
      ><br />
      <router-link active-class="active" to="/fourTree"
        >4.2 递归遍历模型树结构、查询模型节点</router-link
      ><br />
      <router-link active-class="active" to="/fourXyz"
        >4.3 本地（局部）坐标和世界坐标</router-link
      ><br />
      <router-link active-class="active" to="/fourjubu"
        >4.4 改变模型相对于局部坐标原点的位置</router-link
      ><br />
      <router-link active-class="active" to="/fourRemove"
        >4.5 移除对象</router-link
      ><br />
      <router-link active-class="active" to="/fourVisible"
        >4.6 模型隐藏或者显示</router-link
      ><br />
      <h4>第三章：模型对象材质</h4>
      <router-link active-class="active" to="/threeVector"
        >3.1 三维向量Vector3与模型位置、缩放属性</router-link
      ><br />
      <router-link active-class="active" to="/threeEuler"
        >3.2 欧拉Euler与角度属性.rotation</router-link
      ><br />
      <router-link active-class="active" to="/threeColor"
        >3.3 模型材质颜色(Color对象)</router-link
      ><br />
      <router-link active-class="active" to="/threeFu"
        >3.4 克隆.clone()和复制.copy()</router-link
      ><br />
      <h4>第二章：几何体BufferGeometry顶点</h4>
      <router-link active-class="active" to="/twoPoint"
        >2.1、点模型对象Points</router-link
      ><br />
      <router-link active-class="active" to="/twoLine"
        >2.2、线模型对象Line</router-link
      ><br />
      <router-link active-class="active" to="/twoMian"
        >2.2、面模型对象</router-link
      ><br />
      <router-link active-class="active" to="/twoSearch"
        >2.3、几何体顶点索引数据</router-link
      ><br />
      <router-link active-class="active" to="/twoFaxian"
        >2.3、顶点法线数据</router-link
      ><br />
      <h4>第一章 快速入门</h4>
      <router-link active-class="active" to="/scene"
        >1.1、创建一个3D案例 </router-link
      ><br />
      <router-link active-class="active" to="/light"
        >1.2、光源对物体表面的影响</router-link
      ><br />
      <router-link active-class="active" to="/OrbitControls"
        >1.3、相机轨道控制器</router-link
      ><br />
      <router-link active-class="active" to="/morelight"
        >1.4、平行光和环境光</router-link
      ><br />
      <router-link active-class="active" to="/animation"
        >1.5、动画渲染循环</router-link
      ><br />
      <router-link active-class="active" to="/canvas"
        >1.6、Canvas画布布局和全屏</router-link
      ><br />
      <router-link active-class="active" to="/stats"
        >1.7、stats性能监视器/计算渲染帧率</router-link
      ><br />
      <router-link active-class="active" to="/moreBox"
        >1.8、多物体的性能测试</router-link
      ><br />
      <router-link active-class="active" to="/array"
        >1.9、阵列立方体和相机适配体验</router-link
      ><br />
      <router-link active-class="active" to="/geo"
        >1.10、常见简单几何体</router-link
      ><br />
      <router-link active-class="active" to="/Phong"
        >1.11、高光网格材质Phong</router-link
      ><br />
      <router-link active-class="active" to="/antialias"
        >1.12、渲染器设置(锯齿模糊、背景颜色)</router-link
      ><br />
      <router-link active-class="active" to="/guiJs"
        >1.13、gui库(可视化改变三维场景)</router-link
      ><br />
      <router-link active-class="active" to="/guiColor"
        >1.14、gui库(颜色、命名、步长、事件)</router-link
      ><br />
      <router-link active-class="active" to="/guiSelect"
        >1.15、gui.js库(下拉菜单、单选框)</router-link
      ><br />
      <router-link active-class="active" to="/guigroup"
        >1.15、gui.js库(分组)</router-link
      ><br />
    </div>
    <div class="nav_right">
      <router-view />
    </div>
  </div>
</template>

<script setup>
</script>

<style  scoped>
.nav_box {
  width: 100vw;
  display: flex;
}
.nav_left {
  width: 200px;
  background-color: #efefef;
  height: 100vh;
  overflow: auto;
  padding-bottom: 50px;
}
.nav_right {
  flex: 1;
  padding: 0 0 0 10px;
}
.active {
  font-weight: bold;
  color: rgb(255, 0, 0);
}
</style>